<template>
  <div class="user">
    <user-search @user-query-list="queryUserList" @reset-query-list="resetQueryList" />
    <div class="user-main">
      <user-content
        ref="userContentRef"
        @handler-new-click="handlerNewClick"
        @handler-edit-click="handlerEditClick"
      />
      <user-modal ref="userModalRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
import userSearch from './cpns/user-search.vue'
import userContent from './cpns/user-content.vue'
import userModal from './cpns/user-modal.vue'
import type { querListType } from './type'
import { ref } from 'vue'
const userModalRef = ref<InstanceType<typeof userModal>>()
const userContentRef = ref<InstanceType<typeof userContent>>()
// 查询用户
function queryUserList(userList: querListType) {
  userContentRef.value?.postUserList(userList)
}
// 重置
function resetQueryList() {
  userContentRef.value?.postUserList()
}
// 创建一个用户
function handlerNewClick() {
  userModalRef.value?.setDialogModal()
}
// 编辑用户的事件
function handlerEditClick(userInfo: any) {
  userModalRef.value?.setDialogModal(false, userInfo)
}
</script>

<style lang="less" scoped>
.user-main {
  margin-top: 20px;
}
</style>
